<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生 · 我的考试</title>
    <!-- Bootstrap Styles-->
    <link href="../../css/bootstrap/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../../css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->

    <!-- Custom Styles-->
    <link href="../../css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <!-- TABLE STYLES-->
    <link href="../../js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />

</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../teacher/tea_course_index.html">题库与考试</a>
        </div>

        <ul class="nav navbar-top-links navbar-right">

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li>
                        <a href="../student/stu_person_index.html"><i class="fa fa-user fa-fw"></i> 个人中心</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="../../login.html"><i class="fa fa-sign-out fa-fw"></i> 退出登录</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>

    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a href="stu_index.html"><i class="fa fa-dashboard"></i> 我的课程</a>
                </li>
                <li>
                    <a href="stu_test_index.html" class="active-menu"><i class="fa fa-desktop"></i> 我的考试</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">
            <h1 class="page-header">
            我的考试
         </h1>
            <div class="container-fluid">
                <div class="row" >
                    <div class="well">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#test1" data-toggle="tab">未开始的考试</a>
                            </li>
                            <li>
                                <a href="#test2" data-toggle="tab">正在进行的考试</a>
                            </li>
                            <li>
                                <a href="#test3" data-toggle="tab">已结束的考试</a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane active in" id="test1">
                                <!--未开始的考试-->
                                <div class="container-fluid">
                                    <div class="row" id="examsbox1">

                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane fade" id="test2">
                                <!-- 正在进行的考试 -->
                                <div class="container-fluid">
                                    <div class="row" id="examsbox2">

                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="test3">
                                <!-- 已经结束的考试 -->
                                <div class="container-fluid">
                                    <div class="row" id="examsbox3">

                                    </div>
                                </div>
                            </div>
                                    <!-- 此处为考试模态框内容 -->
                                        <div class="modal fade" id="exam" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                        &times;
                                                    </button>
                                                    <h4 class="modal-title" id="myTestLabel">
                                                        考试
                                                    </h4>
                                                </div>
                                                <div class="modal-body">

                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-primary" data-dismiss="modal" style="width: 80px" onclick="window.location.href='stu_test_index.html'">
                                                        提交考试
                                                    </button>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div>
                                        </div><!-- /.modal -->

                                            <!--考试结果的modal-->
                                            <div class="modal fade" id="examResult" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                &times;
                                                            </button>
                                                            <h4 class="modal-title" id="myTestLabel">
                                                                考试结果
                                                            </h4>
                                                        </div>
                                                        <div class="modal-body">

                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-primary" data-dismiss="modal" style="width: 80px" onclick="window.location.href='stu_test_index.html'">
                                                                关闭
                                                            </button>
                                                        </div>
                                                    </div><!-- /.modal-content -->
                                                </div>
                                    </div><!-- /.modal -->

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- /. PAGE WRAPPER  -->
            <!-- /. WRAPPER  -->
            <!-- JS Scripts-->
            <!-- jQuery Js -->
            <script src="../../js/jquery-1.10.2.js"></script>
            <!-- Bootstrap Js -->
            <script src="../../js/bootstrap.min.js"></script>
            <!-- Metis Menu Js -->
            <script src="../../js/jquery.metisMenu.js"></script>
            <!-- DATA TABLE SCRIPTS -->
            <script src="../../js/dataTables/jquery.dataTables.js"></script>
            <script src="../../js/dataTables/dataTables.bootstrap.js"></script>
            <script src="../../js/jquerysession.js"></script>

            <script>
                $(document).ready(function() {
                    $('#dataTables-example').dataTable();

                    fillExamsInfo();

                    $("#examsbox2").on("click",".toAttendExam",function () {
                        var examid = $(this).parent().attr("id").substring(4);
                        var studentid = $.session.get("userid");
                        fillExamPaper(studentid,examid);
                    });

                    $("#examsbox3").on("click",".showResult",function(){

                        var examid =  $(this).parent().attr("id").substring(4);
                        var studentid = $.session.get("userid");
                        fillResult(studentid,examid);
                    });

                });
                function fillExamsInfo() {

                    $.get("/exam/findByStudentId/"+$.session.get("userid"),function (data) {
                        $.each(data.data,function (index,obj) {

                           //把每场考试的信息分别填入页面
                            var examElement =$("<div id='exam"+obj.id+"' class='exambox well col-md-4'></div>");

                            $.get("/CourseTeacher/findById/"+obj.courseteachid,function (ctdata) {
                                examElement.append("<p>课程名称："+ctdata.data.nickname+"</p>");
                                examElement.append("<p>考试名称："+obj.name+"</p>");
                                examElement.append("<p>考试时间："+obj.starttime.substring(0,obj.starttime.length-2)+" 至 "+obj.finishtime.substring(0,obj.finishtime.length-2)+"</p>");
                                examElement.append("<p>考试地点："+obj.place+"</p>");
                                examElement.append("<p>考试人数："+obj.nop+"</p>");
                                examElement.append("<p>监考老师："+obj.invigilator1+","+obj.invigilator2+"</p>");

                                //1-未开始、2-进行中、3-已结束
                                console.log(obj.state);
                                switch (obj.state) {

                                    case 1:$("#examsbox1").append(examElement);
                                        break;
                                    case 2:examElement.append("<button class='btn btn-primary pull-right toAttendExam'>"+"进入考试</button>");
                                        $("#examsbox2").append(examElement);
                                        break;
                                    case 3:examElement.append("<button class='btn btn-primary pull-right showResult'>"+"查看考试结果</button>");
                                        $("#examsbox3").append(examElement);
                                        break;
                                }
                            },'json');

                        });
                    },'json');
                }
                function fillResult(studentid,examid){

                    $.get("/exam/findByExamId/"+examid,function(data1){

                        $.get("/ExamPaper/findDetailsById/"+data1.data.exampaperid,function (data2) {
                           erbody = $("#examResult .modal-body");
                           $(erbody).append("<p>考试名称："+data1.data.name+"</p>");
                            $(erbody).append("<p>试卷名："+data2.data.examPaper.name+"</p>");
                            $(erbody).append("<p>难度："+data2.data.examPaper.dlevel+"</p>");
                            $(erbody).append("<p>总分："+data2.data.examPaper.totalpoints+"分</p>");

                            //考试成绩（相关接口未完成，静态数据填充）
                            // $.get("",function () {
                            //
                            //
                            //     $(erbody).append("<p>考试成绩："+0+"分</p>");
                            // },'json');
                            $(erbody).append("<p>考试成绩："+0+"分</p>");

                        },'json');
                        $("#examResult").modal('show');

                    },'json');
                }
                function fillExamPaper(studentid,examid) {
                    $.get("/exam/findByExamId/"+examid,function(data1){
                        $.get("/ExamPaper/findDetailsById/"+data1.data.exampaperid,function (data2) {
                            //data2.exampaper 难度，总分等信息
                            var exerlist = $("<ul class='list-group'></ul>");
                            if (data2.data.exercises != null) {
                                $.each(data2.data.exercises, function (index, obj) {
                                    var exerElmemnt = $("<li class='list-group-item'></li>");
                                    //题干
                                    switch (obj.exerciseInfo.type){
                                        //1-单选、2-判断、3-填空、4-简答
                                        case 1:
                                            exerElmemnt.append("<p>" +(index+1)+"."+ obj.choice.content + "</p>");
                                            if(obj.choice.labela) exerElmemnt.append("<p><input type='radio' name='exer"+obj.exerciseInfo.id+"'>A."+obj.choice.labela+"</p>");
                                            if(obj.choice.labelb) exerElmemnt.append("<p><input type='radio' name='exer"+obj.exerciseInfo.id+"'>B."+obj.choice.labela+"</p>");
                                            if(obj.choice.labelc) exerElmemnt.append("<p><input type='radio' name='exer"+obj.exerciseInfo.id+"'>C."+obj.choice.labela+"</p>");
                                            if(obj.choice.labeld) exerElmemnt.append("<p><input type='radio' name='exer"+obj.exerciseInfo.id+"'>D."+obj.choice.labela+"</p>");
                                            if(obj.choice.labele) exerElmemnt.append("<p><input type='radio' name='exer"+obj.exerciseInfo.id+"'>E."+obj.choice.labela+"</p>");
                                            break;
                                        case 2:
                                            exerElmemnt.append("<p>"+(index+1)+"." + obj.trueFalse.content + "</p>");
                                            exerElmemnt.append("<p><input type='radio' name='exer"+obj.exerciseInfo.id+"' value = '1'>对</p>");
                                            exerElmemnt.append("<p><input type='radio' name='exer"+obj.exerciseInfo.id+"' value = '0'>错</p>");
                                            break;

                                        case 3:

                                            exerElmemnt.append("<p>"+(index+1)+"." + obj.completion.content + "</p>");
                                            exerElmemnt.append("<p><input type='text' name='exer"+obj.exerciseInfo.id+"'></p>");
                                            break;

                                        case 4:
                                            exerElmemnt.append("<p>"+(index+1)+"." + obj.shortAnswer.content + "</p>");
                                            exerElmemnt.append("<p><textarea name='exer"+obj.exerciseInfo.id+"'></textarea></p>");
                                            break;
                                    }

                                    $(exerlist).append(exerElmemnt);
                                });
                                $("#exam .modal-body").append(exerlist);
                                $("#exam").modal('show');
                            }
                        },'json');
                    },'json');
                }

            </script>
        </div>
    </div>
</div>
</body>

</html>